import classNames from 'classnames';
import React from 'react';

import IconFont from '../IconFont';
import { CheckboxItem } from './CheckboxList';
import Ostyle from './CrumbList.less';

export interface CrumbListProps {
  crumbList: CheckboxItem[];
  onCrumbClick: (currCrumb: CheckboxItem) => void;
}

const CrumbList: React.FC<CrumbListProps> = (props) => {
  const { crumbList, onCrumbClick } = props;

  return (
    <ul
      className={Ostyle.crumb}
      ref={(ulDom) => {
        if (!ulDom || !ulDom?.childNodes) return;
        const ulDomClientWidth = Math.max(296, ulDom.clientWidth); //dialog--destoryOnclose:false ,open变化 该函数还是会执行
        //将(NodeList)类数组对象转换为数组对象
        let childNodesArray = Array.prototype.slice.call(ulDom?.childNodes, 0);
        childNodesArray =
          childNodesArray.length > 3 ? childNodesArray.slice(childNodesArray.length - 3) : childNodesArray;
        if (childNodesArray.length === 1) {
          //
          (ulDom?.childNodes[0] as HTMLLIElement).style.maxWidth = ulDomClientWidth + 'px';
        } else {
          if (childNodesArray.length === 2) {
            ulDom?.childNodes.forEach((childNode) => {
              (childNode as HTMLLIElement).style.maxWidth = Math.floor((ulDomClientWidth - 4) / 2) + 'px';
            });
          } else if (childNodesArray.length === 3) {
            // 最多显示三个
            let liTotalClientWidth = 0;
            childNodesArray.forEach((childNode) => {
              liTotalClientWidth += (childNode as HTMLLIElement).clientWidth;
            });
            const centerLiDom = childNodesArray[1];
            const duochuWidth = liTotalClientWidth - (ulDomClientWidth - 8);

            if (duochuWidth > 0) {
              (ulDom?.childNodes[ulDom?.childNodes.length - 3] as HTMLLIElement).style.maxWidth = '120px';
              (ulDom?.childNodes[ulDom?.childNodes.length - 2] as HTMLLIElement).style.maxWidth =
                centerLiDom.clientWidth - duochuWidth + 'px';
              (ulDom?.childNodes[ulDom?.childNodes.length - 1] as HTMLLIElement).style.maxWidth = '120px';
            }
          }
        }
      }}
    >
      {crumbList.map((crumbItem, crumbIndex) => (
        <li
          key={crumbItem.id}
          className={Ostyle.crumb_item}
          style={{
            display: crumbIndex >= crumbList.length - 3 ? 'flex' : 'none',
          }}
        >
          {crumbList.length > 3 && crumbIndex === crumbList.length - 3 && (
            <IconFont
              type="icon-dbLeft"
              className={Ostyle.item_arrow_left}
              onClick={(e) => {
                onCrumbClick(crumbItem);
              }}
            />
          )}
          <span
            className={classNames(Ostyle.item_text, {
              [Ostyle.active]: crumbIndex === crumbList.length - 1,
            })}
            onClick={(e) => {
              crumbIndex < crumbList.length - 1 && onCrumbClick(crumbItem);
            }}
          >
            {crumbItem.name}
          </span>
          {crumbIndex < crumbList.length - 1 && <IconFont type="icon-right" className={Ostyle.item_arrow_right} />}
        </li>
      ))}
    </ul>
  );
};

export default CrumbList;
